<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <style>
        html,
        body,
        main {
            font-size: 12px;
            height: 100%;
        }

        h1 {
            font-size: 2rem;
        }

        fieldset {
            border: 0
        }

        article {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            width: 600px;
            height: 700px;
            border: 1px solid #ccc;
            margin: auto;
        }

        table {
            width: 100%;
        }

        input[type=text],
        input[type=password],
        input[type=search],
        input[type=email] {
            margin-top: 10px;
            height: 30px;
            width: 240px;
        }

        input[type=checkbox],
        input[type=radio] {
            margin-top: 10px;
            height: 20px;
            margin-right: 6px;
        }

        .title {
            line-height: 40px;
            vertical-align: -20px;
        }

        .title-label {
            line-height: 20px;
            vertical-align: 5px;
        }

        select {
            margin-top: 10px;
            margin-right: 20px;
            height: 30px;
            width: 107px;
        }

        .info {
            display: flex;
            flex-direction: row;
            margin-top: 10px;
        }

        .btn-operation {
            height: 30px;
            width: 50px;
            margin-right: 30px;
            margin-top: 20px;
        }

        .info-img {
            width: 16px;
            height: 16px;
            margin-right: 10px;
        }

        .success-text {
            color: green;
        }

        .error-text {
            color: red;
        }

        .success-image {
            background: url(images/icons/success.png) no-repeat 0 0/16px 16px;
        }

        .error-image {
            background: url(images/icons/error.png) no-repeat 0 0/16px 16px;
        }
    </style>
</head>

<body>
    <main>
        <article>
            <aside style="text-align: center;">
                <h1>用户信息注册</h1>
            </aside>
            <fieldset>
                <legend hidden>用户注册</legend>
                <form action="" method="get">
                    <table>
                        <tbody>
                            <tr>
                                <td style="width:100px"><span class="title">用户名：</span></td>
                                <td style="width:240px;"><input type="text" name="userName" id="userName"
                                        placeholder="请输入您的用户名"></td>
                                <td style="width:200px;">
                                    <nav id="userNameInfo" class="info">
                                        <div class="info-img"></div>
                                        <div class="info-text"></div>
                                    </nav>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="title">昵称：</span></td>
                                <td><input type="text" name="nickName" id="nickName" placeholder="请输入您的昵称"></td>
                                <td>
                                    <nav id="nickNameInfo" class="info">
                                        <div class="info-img"></div>
                                        <div class="info-text"></div>
                                    </nav>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="title">密码：</span></td>
                                <td><input type="password" name="password" id="password" placeholder="请输入您的密码"></td>
                                <td>
                                    <nav id="passwordInfo" class="info">
                                        <div class="info-img"></div>
                                        <div class="info-text"></div>
                                    </nav>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="title">重复密码：</span></td>
                                <td><input type="password" name="rePassword" id="rePassword" placeholder="请再输入一次密码">
                                </td>
                                <td>
                                    <nav id="rePasswordInfo" class="info">
                                        <div class="info-img"></div>
                                        <div class="info-text"></div>
                                    </nav>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="title">性别：</span></td>
                                <td colspan="2">
                                    <input type="radio" name="sex" value="1" id="man" checked><label class="title-label"
                                        for="man">男</label>&nbsp;&nbsp;&nbsp;&nbsp;
                                    <input type="radio" name="sex" value="2" id="woman"><label class="title-label"
                                        for="woman">女</label>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="title">地址：</span></td>
                                <td><input type="text" name="address" id="address" placeholder="请输入您的地址"></td>
                                <td>
                                    <nav id="addressInfo" class="info">
                                        <div class="info-img"></div>
                                        <div class="info-text"></div>
                                    </nav>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="title">电话号码：</span></td>
                                <td><input type="text" name="phone" id="phone" placeholder="请输入您的电话号码"></td>
                                <td>
                                    <nav id="phoneInfo" class="info">
                                        <div class="info-img"></div>
                                        <div class="info-text"></div>
                                    </nav>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="title">email：</span></td>
                                <td><input type="email" name="email" id="email" placeholder="请输入您的邮箱地址"></td>
                                <td>
                                    <nav id="emailInfo" class="info">
                                        <div class="info-img"></div>
                                        <div class="info-text"></div>
                                    </nav>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="title">籍贯：</span></td>
                                <td colspan="2">
                                    <select id="province"></select>&nbsp;&nbsp;
                                    <select id="city"></select>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="title">爱好：</span></td>
                                <td colspan="2">
                                    <label style="margin-right:10px;"><input type="checkbox" name="hobby"
                                            value="muisc"><span class="title-label">音乐</span></label>&nbsp;&nbsp;
                                    <label style="margin-right:10px;"><input type="checkbox" name="hobby"
                                            value="sport"><span class="title-label">运动</span></label>&nbsp;&nbsp;
                                    <label style="margin-right:10px;"><input type="checkbox" name="hobby"
                                            value="book"><span class="title-label">读书</span></label>&nbsp;&nbsp;
                                    <label style="margin-right:10px;"><input type="checkbox" name="hobby"
                                            value="coding"><span class="title-label">敲代码</span></label>&nbsp;&nbsp;
                                    <label style="margin-right:10px;"><input type="checkbox" name="hobby"
                                            value="debug"><span class="title-label">调bug</span></label>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="3" style="text-align: center;">
                                    <button class="btn-operation">重置</button>
                                    <button class="btn-operation">注册</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </form>
            </fieldset>
        </article>
    </main>
</body>

</html>
<script src="./js/ajax.js" type="module"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
<script src="./js/register.js" type="module"></script>